<template>
  <view class="search_container">
    <view class="search-box">
      <!-- 使用 uni-ui 提供的搜索组件 -->
      <uni-search-bar @input="input()" :radius="100" cancelButton="none"></uni-search-bar>
    </view>
    <view class="sugg_list">
        <view class="sugg_item" v-for="(item,index) in searchResult" :key="index" @click="gotoNewsList(kw,0)">
          <uni-icons type="search" size="16"></uni-icons>
          <view class="item_name">
          {{item.title}}
        </view>
      </view>
    </view>
    <!-- 搜索历史 -->
    <view class="history_container">
      <view class="history_title">
        <text>搜索历史</text>
        <uni-icons type="trash" size="17"></uni-icons>
      </view>
      <view class="history_list">
        <view class="tag" v-for="(item ,index) in history" :key="index" v-if="item" @click="gotoNewsList(item,0)">
          {{item}}
        </view>
      </view>
    </view>
    <!-- 搜索热榜 -->
    <view class="hot_con">
      <view class="hot_title">
        <uni-icons type="fire-filled" color="#1360B5" size="24"></uni-icons>
        <text>校园热门</text>
      </view>
      <view class="hot_list">
        <view class="po">
          
        </view>
        <view class="hot_item" v-for="(item,index) in hot_list.slice(0,5)" :key="hot_list" @click="gotoNewsList(kw,1)">

        <text>{{item.title}}</text>  
        </view>
      </view>
    </view>
    
  </view>
  
</template>

<script>
  export default {
    data() {
      return {
        timer:null,
        kw: ' ',
        searchResult:[],
        history_list:[],
        history:[],
        hot_list:[]
      };
    },
    onLoad(){
      this.history_list = JSON.parse(uni.getStorageSync('kw') || '[]');
      this.history=this.history_list;
      this.getHotList()
    },
    methods: {
      input(e) {
        // e.value 是最新的搜索内容
        clearTimeout(this.timer);
        this.timer=setTimeout(()=>{
          this.kw=e;
          this.getSearchResult();
        },500)
      },

      gotoNewsList(kw,method){
        console.log(kw)
        uni.navigateTo({
          url:'../newsList/newsList?news_list='+kw+'&method='+method,
        })
      },
      saveHistory(){
        const set_arr=new Set(this.history_list);
        set_arr.delete(this.kw);
        console.log(set_arr);
        this.history_list=Array.from(set_arr);
        this.history_list.unshift(this.kw);
        this.history=this.history_list;
        uni.setStorageSync('kw', JSON.stringify(this.history_list))
      },
      async getSearchResult(){
        if(this.kw.length==0){
          this.searchResult=[];
          return;
        }
        const query = {
          key: this.kw,
        }
        const { data: res } = await uni.$http.get('/news/recommend/search', query)
          if (res.code != 1000) return uni.$showMsg()
          console.log(res);
          this.searchResult=res.data.news;
          this.saveHistory();
      },
      async getHotList(){
        const { data: res } = await uni.$http.get('/news/recommend/v4')
          if (res.code != 1000) return uni.$showMsg()
          this.hot_list=res.data.news
      }
    }
  }
</script>

<style lang="scss">
  .hot_con{
    margin-top: 12px;
    .hot_title{
      display: flex;
      align-items: center;
      text{
        font-size: 17px;
        margin-right: 5px;
      }
    }
    .hot_list{
      .hot_item{
        padding-left: 9px;
        height: 25px;
        display: flex;
        align-items: center;
        font-size: 15px;
        margin-top: 11px;
        .po{
        width: 5px;
        border-radius: 50%;
        background-color: black;
        height: 5px;
        margin-right: 15px;
      }
        
      text{
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        text-align: left;
      }
      }
    }
  }
  .history_container{
    padding: 0 5px;
    border-bottom: 1px solid #efefef;
    padding-bottom: 12px;
    .history_title{
      display: flex;
      justify-content: space-between;
      height: 40px;
      align-items: center;
      font-size: 13px;
    }

    .history_list{
      display: flex;
      flex-wrap: wrap;
      .tag{
        margin-top: 7px;
        margin-right: 7px;
        background-color: #1684FC!important;
        color: white;
        padding: 4px 6px;
        font-size: 14px;
        border-radius: 5px;
      }
    }
  }
  .sugg_list{
    padding: 0 5px;  
    padding-left: 5px;
    .sugg_item{
      display: flex;
      align-items: center;
      justify-content: flex-start;
      padding: 13px 0;
      border-bottom: 1px solid #efefef;
      .item_name{
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        margin-left: 5px;
        font-size: 12px;
      }
    }
  }
.uni-searchbar {
  /* #ifndef APP-NVUE */
  display: flex;
  /* #endif */
  flex-direction: row;
  position: relative;
  padding: 16rpx;
  /* 将默认的 #FFFFFF 改为 #C00000 */
  background-color: #1684FC ;
}
.search-box {
  position: sticky;
  top: 0;
  z-index: 999;
}
</style>
